type tagOptions = {
    SvgIcon?: any
    text?: string
    hoverBgColor?: string
    bgColor?: string
    hoverTextColor?: string
    textColor?: string
    styles?: React.CSSProperties
}


const XkTag: React.FC<tagOptions> = (
    { SvgIcon,
        text = '暂无描述',
        bgColor = 'var(--maxLightGray)',
        hoverBgColor = '#ffa500',
        textColor = 'var(--greyFont)',
        hoverTextColor = '#fff',
        styles = {}
    }
) => {
    return (
        <span
            style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '5px',
                padding: '3px 10px',
                backgroundColor: bgColor,
                borderRadius: '3px',
                fontSize: '14px',
                color: textColor,
                transition: 'all .3s',
                cursor: 'pointer',
                userSelect: 'none',
                ...styles
            }}
            onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = hoverBgColor;
                e.currentTarget.style.color = hoverTextColor;
            }}
            onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = bgColor;
                e.currentTarget.style.color = textColor;
            }}
        >
            {SvgIcon && <SvgIcon />}
            {/* &nbsp; */}
            {text}

        </span >
    )
}

export default XkTag